let dom = document.getElementById('clock')
let ctx = dom.getContext('2d')
let width = ctx.canvas.width
let height = ctx.canvas.height
let r = width / 2

function drawBackground() {
	ctx.beginPath()
	ctx.lineWidth = 10 
	ctx.strokeStyle = '#FF1515'
	ctx.arc(0, 0, r - ctx.lineWidth / 2, 2 * Math.PI, false)
	ctx.stroke()
	
	ctx.beginPath()
	ctx.lineWidth = 5 
	ctx.strokeStyle = '#B70D0D'
	ctx.arc(0, 0, r - ctx.lineWidth / 2 - 5, 2 * Math.PI, false);
	ctx.stroke()
	
	ctx.beginPath()
	ctx.lineWidth = 1 
	ctx.fillStyle = '#E9887A'
	ctx.arc(0, 0, 6, 2 * Math.PI, false);
	ctx.fill()
	
	ctx.beginPath()
	ctx.lineWidth = 1 
	ctx.fillStyle = '#EDB7AF'
	ctx.arc(0, 0, 5, 2 * Math.PI, false);
	ctx.fill()
	
	ctx.beginPath()
	ctx.lineWidth = 1 
	ctx.fillStyle = '#C44A3D'
	ctx.arc(0, 0, 3, 2 * Math.PI, false);
	ctx.fill()
}

function drawMainPoint(){
	let rectWidth = 5;
	let rectHeight = 10;
	ctx.beginPath();
	ctx.fillStyle = '#666665'
	for(var i = 0 ;i < 12 ;i++){
		ctx.rotate(Math.PI/180 * 30 )
		ctx.fillRect(-2.5,-90,rectWidth,rectHeight)		
	}

}

function drawSmallPoint(){
	ctx.fillStyle = '#A3A3A3'
	for(var i = 0;i<60;i++){
			ctx.rotate(Math.PI/180 * 6)
		if(i%5 != 4){
			ctx.beginPath();
			ctx.arc(0, -85, 2,2 * Math.PI,  false)
			ctx.fill()			
		}
	}

}

function drawNumber(){
	ctx.fillStyle = '#000000'
	ctx.font = "20px serif"
	ctx.textBaseline = 'middle' 
	ctx.textAlign = 'center'
	for(var i = 1; i <= 12 ; i++){
			ctx.rotate(Math.PI/180 * 30)
		ctx.fillText(String(i), 0, -70)
	}
	
}

function drawHour(deg) {
	ctx.save()
	ctx.fillStyle = '#666665'
	let rectWidth = 4;
	let rectHeight = 28;
	ctx.beginPath();
	
	ctx.rotate(Math.PI/180 * deg)
	ctx.fillRect(-2,-34,rectWidth,rectHeight)
	
	ctx.rotate(-Math.PI/180 * deg)
	ctx.restore()
}

function drawMinite(deg) {
	
	ctx.save()
	ctx.fillStyle = '#666665'
	let rectWidth = 4;
	let rectHeight = 40;
	ctx.beginPath();
	
	ctx.rotate(Math.PI/180 * deg)
	ctx.fillRect(-2,-46,rectWidth,rectHeight)
	ctx.rotate(-Math.PI/180 * deg)
	ctx.restore()
}

function drawSecond(deg){
	ctx.save()
	ctx.fillStyle = '#DE6857'
	let rectWidth = 3;
	let rectHeight = 50;
	ctx.beginPath();
	
	ctx.rotate(Math.PI/180 * deg)
	ctx.fillRect(-2,-56,rectWidth,rectHeight)
	ctx.rotate(-Math.PI/180 * deg)	
	
	//三角
	ctx.beginPath();
	var rad =  Math.PI / 180 * deg;
	ctx.rotate(rad);
	ctx.lineWidth = 3
	ctx.moveTo(-5, -50)
	ctx.lineTo(5, -50)
	ctx.lineTo(0, -r +40)
	ctx.fill()
	ctx.restore()
}

ctx.translate(r, r)
function draw(date){
		ctx.clearRect(-width/2, -height/2, width, height)
		drawMainPoint()
		drawSmallPoint()
		drawBackground()
		drawNumber()
		var secondDeg = date[2] * 6
		var minuteDeg = (date[2] / 60 + date[1] )* 6
		var hourDeg = (minuteDeg / 360 + date[0])* 30
		drawHour(hourDeg)
		drawMinite(minuteDeg)
		drawSecond(secondDeg)
}

function getDate() {
		var now = new Date()
		var hour = now.getHours()
		var minute = now.getMinutes()
		var second = now.getSeconds()
		return [hour,minute,second]
}
setInterval(function(){
	var date = getDate()
	draw(date)	
}, 1000)
